<template>
<div class="fbPage">
  <navTop title="发布"></navTop>
  <div class="h5"></div>
  <div class="t_div flex_sb">
    <div class="t_l">
      <div class="tl1">发布供需</div>
      <div class="tl2">全域产业链数字图谱服务</div>
    </div>
    <div class="t_r">
      <div class="tr1">成武</div>
      <div class="tr2">山东成武振兴乡村经济</div>
    </div>
  </div>
  <div class="box2">
    <div class="box1 flex_ac flex_sb">
      <div class="">标题</div>
		  <input type="text" placeholder="请输入标题" v-model="form.title"/>
    </div>
	</div>
	<div class="box mt5">
		<div class="imgList" id='imgList'>
			<div class="img img_item" v-for="(item,index) in imgs" :key='index'>
				<img class="img"  :src="item" mode="aspectFit" @click="openImg(index)"></img>
				<img class="close" src="../assets/img/x.jpg" mode="" @click="delImg(index)"></img>
			</div>
			<div class="img img_item"  @click="chooseimg">
				<img class="ss" src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/upload.png" mode=""></img>
				<div class="xx">
					上传图片
				</div>
			</div>
			<div class="img"></div>
      <input type="file" accept="image/*" id="file"  @change="uploadImg" style="display: none;" />
		</div>
    <div class="ps">发布配图推荐尺寸：200*200以上，支持jpg/png格式</div>
    <div class="h20"></div>
    <textarea  v-model="form.desc" placeholder="请输入发布信息" />
    <div class="line"></div>
    <div class="mt12 flex_sb flex_ac">
      <div class="ccc">选择需求</div>
      <div class="mla mr3 ccc2">供应</div>
      <van-icon name="arrow" color="#999999" size="14" />
    </div>
    <div class="flex mt20">
      <div class="choose_div choose_div_a">需求</div>
      <div class="choose_div">供应</div>
    </div>
	</div>

  <div class="box2">
    <div class="box1 flex_ac flex_sb">
      <div class="">产业链</div>
		  <div class="mla mr3" style="color: #666666;" @click="showPicker = true">{{form.chain_name||'请选择'}}</div>
      <van-icon name="arrow" color="#999999" size="14" />
    </div>
    <div class="h1"></div>
    <div class="box1 flex_ac flex_sb">
      <div class="">名称</div>
		  <input type="text" v-model="form.name" placeholder="请输入名称"/>
    </div>
    <div class="h1"></div>
    <div class="box1 flex_ac flex_sb">
      <div class="">数量</div>
		  <input type="num" v-model="form.num" placeholder="请输入数量"/>
    </div>
    <div class="h1"></div>
    <div class="box1 flex_ac flex_sb">
      <div class="">价格</div>
		  <input type="text" v-model="form.price" placeholder="请输入价格" />
    </div>
    <div class="h1"></div>
    <div class="box1 flex_ac flex_sb">
      <div class="">地址</div>
		  <input type="text" v-model="form.address" placeholder="请输入地址" />
    </div>
	</div>
	
	<div class="btn" @click="submit">发 布</div>
  <div class="h40"></div>

  <van-popup v-model="showPicker" round position="bottom">
    <van-picker
      value-key="chain_name"
      show-toolbar
      :columns="chainList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</div>
</template>
<script>
import navTop from '@/components/navTop.vue'
import { common,xuqiu } from '@/api/api.js'
export default {
  components: {
    navTop
  },
  data() {
    return {
      imgs:[],
      form: {
        title: '',
        name: '',
        num: '',
        imgs:'',
        price: '',
        address: '',
        desc:'',
        chain_name:'',
      },
      showPicker: false,
      chainList: []
    }
  },
  created(){
    if(localStorage.token == undefined) {
      this.$router.push({name: 'login'})
    }
    let chainList = JSON.parse(sessionStorage.chainList)
    chainList.unshift({chain_name: '不限',id:''})
    this.chainList = chainList
  },
  methods: {
    onConfirm(val,index) {
      this.showPicker = false
      this.form.chain_name = val.chain_name
      this.form.chain_id = val.id
    },
    delImg(index){
      this.imgs.splice(index,1)
    },
    uploadImg(event){
      let formData = new FormData()
      formData.append('file', event.target.files[0])
      common.upload(formData).then(res => {
        this.imgs.push(res.data.url)
      })
    },
    openImg() {
      
    },
    chooseimg() {
      let file = document.getElementById('file')
      file.click()
    },
    submit() {
      if(!this.form.title){
        this.$toast('请输入标题')
        return
      }
      if(!this.form.name){
        this.$toast('请输入名称')
        return
      }
      this.form.imgs = this.imgs.join(',')
      xuqiu.submit(this.form).then(res => {
        this.$router.push({name:'success',query:{type:'fb'}})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.fbPage{
  height: 100%;
  width: 100%;
  overflow: auto;
  background: #F4F4F4;
}
textarea{
  width: 100%;
  height: 80px;
  border: none;
  padding: 0 5px;
  font-size: 14px;
}
input{
  width: calc(100% - 100px);
  border: none;
  padding: 0 5px;
}
.btn{
	margin: 40px 15px 0;
	width:calc(100% - 30px);
	height: 44px;
	line-height: 44px;
  background: linear-gradient(-34deg, #EB7418 ,#F6A15F );
	border-radius: 22px;
	text-align: center;
	color:#fff;
	font-size: 18px;
}
.desc{
	font-weight: 400;
	font-size: 11px;
	color: #999999;
	padding-left:10px;
	line-height: 20px;
}
.box1{
	height: 55px;
	background: #FFFFFF;
	border-radius: 3px;
	padding:0 10px;
	margin: 0 5px;
	
	font-size: 14px;
	color: #000000;
	input{
		text-align: right;
		font-size: 14px;
		color: #000000;
	}
}
.box{
	background:#fff;
	border-radius: 3px;
	margin: 5px;
	margin-top: 0;
	padding:15px 10px;
	.title{
		font-size: 14px;
		color: #000000;
	}
	.imgList{
		width: 100%;
		.img_item{
			display: inline-block;
			background: #F7F7F7;
			color:#BFBFBF;
			text-align: center;
			overflow: hidden;
			border-radius: 6px;
			width: 70px;
			height: 70px;
			
			font-size: 12px;
			color: #999999;
			.ss{
				height:25px;
				width:25px;
				margin-bottom:3px;
				display: block;
				margin:auto;
				margin-top:15px;
			}
			.xx{
				width:100%;
				text-align: center;
			}
		}
		.img{
			margin: 5px;
			position: relative;
			.img{
				width: 100%;
				height:100%;
				// height: 200rpx;
				border-radius: 6px;
				background-color: rgba(0,0,0,.1);
			}
			.close{
				position: absolute;
				top:0px;
				right: 0px;
				width: 20px;
				height: 20px;
			}
		}
	}
}
.ps{
  font-size: 11px;
  margin-left: 5px;
  margin-top: -10px;
  color: #666666;
}


.t_div{
  height: 90px;
  background: #FFFFFF;
  border-radius: 3px;
  margin: 0 5px 5px;
}
.tl1{
  font-size: 23px;
  color: #000000;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 18px;
  margin-bottom: 10px;
}
.tl2{
font-size: 13px;
color: #000000;
  margin-left: 10px;

}
.tr1{
font-size: 32px;
color: #FCAB67;
text-align: right;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.tr2{
  font-size: 12px;
  color: #FA8A26;
  text-align: right;
  margin-right: 10px;

}

.line{
  height: 1px;
  background: #EBEBEB;
  margin: 0 5px;
}

.ccc{
  font-size: 17px;
  color: #333;
}
.ccc2{
  font-size: 14px;
  color: #FA8A26;
}
.choose_div{
  width: 60px;
  height: 30px;
  background: #F5F5F5;
  border: 1px solid #F5F5F5;
  border-radius: 15px;
  font-size: 14px;
  color: #000000;
  text-align: center;
  line-height: 30px;
  margin-right: 20px;
}
.choose_div_a{
  background: rgba(250,138,38,0.1);
  border-radius: 15px;
  border: 1px solid #FA8A26;
  color: #FA8A26;
}
</style>